<template>
    <div>
        <h1 style="color: red">直播平台测试</h1>
        <!-- 推流的视频展示 -->
        <div>
            <div id="id_local_video"
                style="width:100%;height:500px;display:flex;align-items:center;justify-content:center;"></div>
            <div style="margin: 20px;">
                <el-button type="primary" @click="openCamera()">打开摄像头</el-button>
                <el-button type="primary" @click="closeCamera()">关闭摄像头</el-button>
                <el-button type="primary" @click="startScreenCapture()">共享屏幕</el-button>
                <el-button type="primary" @click="stopScreenCapture()">关闭共享</el-button>
            </div>
            <div style="margin: 20px;">
                <el-button type="primary" @click="startMicrophone()">打开麦克风</el-button>
                <el-button type="primary" @click="stopMicrophone()">关闭麦克风</el-button>
                <el-button type="primary" @click="startPush()">开始直播</el-button>
                <el-button type="primary" @click="stopPush()">停止直播</el-button>
            </div>
        </div>
    </div>
</template>

<script>
//推流的视频展示
//https://cloud.tencent.com/document/product/454/56493

export default {
    data() {
        return {
            livePusher: {},
            liveInfo: {
                pushUrl: ""
            }
        }
    },
    methods: {
        //初始化腾讯推流组件
        readyPusher() {
            // eslint-disable-next-line no-undef
            this.livePusher = new TXLivePusher();
            // 指定本地视频播放器容器：
            this.livePusher.setRenderView('id_local_video');
            // 设置视频质量
            this.livePusher.setVideoQuality('1080p');
            // 设置音频质量
            this.livePusher.setAudioQuality('standard');
            // 自定义设置帧率
            this.livePusher.setProperty('setVideoFPS', 120);
            console.log('readyPusher OK');
            //获取视频效果管理实例
            this.videoEffectManager = this.livePusher.getVideoEffectManager();
            //开启混流
            this.videoEffectManager.enableMixing(true);
            //设置混流参数
            this.videoEffectManager.setMixingConfig({
                videoWidth: 1280,
                videoHeight: 720,
                videoFramerate: 15
            });
        },
        openCamera() {
            // 打开摄像头
            this.livePusher.startCamera();
        },
        closeCamera() {
            // 关闭摄像头
            this.livePusher.stopCamera();
        },
        startScreenCapture() {
            // 打开共享桌面
            this.livePusher.startScreenCapture();
        },
        stopScreenCapture() {
            // 关闭共享桌面
            this.livePusher.stopScreenCapture();
        },
        startMicrophone() {
            // 打开麦克风
            this.livePusher.startMicrophone();
        },
        stopMicrophone() {
            // 关闭麦克风
            this.livePusher.stopMicrophone();
        },
        startPush() {
            console.log("startPush", this.liveInfo.pushUrl)
            this.livePusher.startPush(this.liveInfo.pushUrl)

        },
        stopPush() {
            console.log("stopPush", this.liveInfo.pushUrl)
            this.livePusher.stopPush(this.liveInfo.pushUrl);
        },
    },
    mounted() {
        //let obj = this.$route.query.obj;
        //this.live = JSON.parse(obj);
        this.liveInfo.pushUrl = "webrtc://160242.livepush.myqcloud.com/yjs2103A_Group1/game_111?txSecret=101823690be2f5c1d4c8b05755214e6d&txTime=655C9D9C";
        //--1 初始化腾讯云播放器
        /*动态创建引入js*/
        let script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "https://imgcache.qq.com/open/qcloud/live/webrtc/js/TXLivePusher-1.0.0.min.js";
        document.getElementsByTagName("head")[0].appendChild(script);

        this.readyPusher();

    }
}
</script>

<style>
.filmvideo {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>